<template>
    <div class="contain-box">
        <div class="box-header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="box-form">
            <div class="form-header">
                <el-button type="primary" style="background-color: #1abc9c" size="small" @click="cateDialog = true">
                    新增分类
                </el-button>
            </div>
            <div class="form-table">
                <el-tree
                        :props="treeProps"
                        :data="data"
                        node-key="id"
                        default-expand-all
                        :expand-on-click-node="false">
					  <span class="custom-tree-node" slot-scope="{ node, data }">
						<span>{{ node.label }}</span>
						<span>
						  <el-button
                                  style="color: #1abc9c"
                                  type="text"
                                  size="mini"
                                  @click="append(data)">
							新增子分类
						  </el-button>
						  <el-button
                                  style="color: #1abc9c"
                                  type="text"
                                  size="mini"
                                  @click="editShow(data)">
							编辑
						  </el-button>
						  <el-button
                                  style="color: #1abc9c"
                                  type="text"
                                  size="mini"
                                  @click="remove(data)">
							删除
						  </el-button>
						</span>
					  </span>
                </el-tree>
            </div>

            <div class="form-page">
                <el-pagination
                        background
                        @current-change="handleSelectionChange"
                        :current-page="pageObj.pageIndex"
                        :page-size="pageObj.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

        </div>

        <el-dialog
                title="编辑分类"
                :visible.sync="cateDialogEdit"
                width="30%"
        >
            <div class="dialog-box">
                <el-input v-model="editObj.name" placeholder="请输入分类名称" size="small" style="width: 60%"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
					<el-button @click="cateDialogEdit = false" size="small">取 消</el-button>
					<el-button type="primary" @click="submitEdit" size="small"
                               style="background-color: #1abc9c">确 定</el-button>
				  </span>
        </el-dialog>

        <el-dialog
                title="新增分类"
                :visible.sync="cateDialog"
                width="30%"
        >
            <div class="dialog-box">
                <el-input v-model="name" placeholder="请输入分类名称" size="small" style="width: 60%"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
					<el-button @click="cateDialog = false" size="small">取 消</el-button>
					<el-button type="primary" @click="submitAdd" size="small"
                               style="background-color: #1abc9c">确 定</el-button>
				  </span>
        </el-dialog>
        <el-dialog
                title="新增子分类"
                :visible.sync="cateSonDialog"
                width="30%"
        >
            <div class="dialog-box">
                <el-input placeholder="请输入子分类名称" v-model="sonTitle" size="small" style="width: 60%"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
					<el-button @click="cateSonDialog = false" size="small">取 消</el-button>
					<el-button type="primary" @click="submitSon" size="small"
                               style="background-color: #1abc9c">确 定</el-button>
				  </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                cateDialogEdit: false,
                parentId: null,
                pageObj: {
                    pageIndex: 1,
                    pageSize: 5
                },
                treeProps: {
                    label: "name",
                    children: "goodTypeList"
                },
                name: null,
                total: 0,
                id: 1000,
                cateDialog: false,
                cateSonDialog: false,
                data: null,
                readySonData: null,
                sonTitle: null,
                editObj: {
                    id: null,
                    name: null
                }
            }
        },
        created() {
            this.findPage()
        },
        methods: {
            submitEdit() {
                if (!this.editObj.name) {
                    return this.$message.warning('请输入分类名称')
                }
                this.axios.post('/goodType/edit', this.editObj).then(res => {
                    if (res.data.code === 200) {
                        this.cateDialogEdit = false
                        this.findPage()
                        this.$message.success('编辑成功')
                    }
                })
            },
            editShow(data) {
                this.editObj = data
                this.cateDialogEdit = true
            },
            submitAdd() {
                if (!this.name) {
                    return this.$message.warning('请输入分类名称')
                }
                this.axios.post('/goodType/save?name=' + this.name).then(res => {
                    if (res.data.code === 200) {
                        this.cateDialog = false
                        this.findPage()
                        this.$message.success('新增成功')
                    }
                })
            },
            handleSelectionChange(currentPage) {
                this.pageObj.pageIndex = currentPage;
                this.findPage();
            },
            findPage() {
                this.axios.post('/goodType/findPage', this.pageObj).then(res => {
                    if (res.data.code === 200) {
                        this.data = res.data.data.data
                        this.total = res.data.data.total
                    }
                })
            },
            append(data) {
                this.parentId = data.id
                this.cateSonDialog = true
            },
            submitSon() {
                if (!this.sonTitle) {
                    return this.$message.warning('请输入子分类的名称')
                }
                this.axios.post('/goodType/save?name=' + this.sonTitle + "&parentId=" + this.parentId).then(res => {
                    if (res.data.code === 200) {
                        this.cateSonDialog = false
                        this.findPage()
                        this.$message.success('新增成功')
                    }
                })
            },

            remove(data) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.get('/goodType/deleteById?id=' + data.id).then(res => {
                        if (res.data.code === 200) {
                            this.findPage()
                            this.$message.success('删除成功')
                        }
                    })
                })

            },

        }
    }
</script>

<style scoped lang="less">
    .contain-box {
        width: 100%;
        height: 100%;

        .dialog-box {
            width: 100%;
        }

        /deep/ .el-dialog__body {
            padding: 10px 20px;
        }

        .box-header {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .box-set {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .box-title {
            width: 100%;
            margin: 20px 0;
            padding: 10px 20px;
            border-radius: 5px;
            box-sizing: border-box;
            background-color: rgba(26, 188, 156, 0.2);
            color: #666;
            font-size: 14px;
        }

        .box-form {
            width: 100%;
            height: calc(100% - 150px);

            .form-header {
                width: 100%;
            }

            .form-page {
                margin-top: 50px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                /deep/ .el-pager .active {
                    background-color: #1abc9c;
                }
            }

            .form-table {
                margin-top: 20px;
                width: 100%;

                .custom-tree-node {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                    padding-right: 8px;
                }
            }

            .form-page {
                margin-top: 50px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                /deep/ .el-pager .active {
                    background-color: #1abc9c;
                }
            }
        }
    }
</style>
